import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

/**
 * 数据卡片组件
 * 显示单个监测参数（温度/压力/流量）
 */
Rectangle {
    id: root
    
    implicitWidth: 220
    implicitHeight: 160
    
    // ========================================
    // 公开属性
    // ========================================
    property string dataType: "temperature"  // 数据类型: temperature, pressure, flow
    property string title: "温度"             // 卡片标题
    property string icon: "🌡️"               // 图标
    property real value: 0.0                 // 当前值
    property string unit: "℃"                // 单位
    property int precision: 1                // 小数精度
    property real warningThreshold: 80.0     // 警告阈值
    property real criticalThreshold: 100.0   // 严重阈值
    property bool showStatus: true           // 是否显示状态标签
    property bool isUpdating: false          // 是否正在更新数据
    
    // ========================================
    // 计算属性
    // ========================================
    // 状态：normal, warning, critical
    readonly property string dataStatus: {
        if (value >= criticalThreshold) return "critical"
        if (value >= warningThreshold) return "warning"
        return "normal"
    }
    
    // 左边框颜色
    readonly property color accentColor: {
        switch(dataType) {
            case "temperature": return "#ef4444"  // 红色
            case "pressure": return "#3b82f6"     // 蓝色
            case "flow": return "#10b981"         // 绿色
            default: return "#6b7280"             // 灰色
        }
    }

    readonly property color backgroundColor: {
        switch(dataType) {
            case "temperature": return "#fff5f5"
            case "pressure": return "#f5f8ff"
            case "flow": return "#f3fff8"
            default: return "#f8fafc"
        }
    }
    readonly property color borderColor: {
        switch(dataType) {
            case "temperature": return "#fecaca"
            case "pressure": return "#bfdbfe"
            case "flow": return "#bbf7d0"
            default: return "#e2e8f0"
        }
    }
    
    // ========================================
    // 组件样式
    // ========================================
    radius: 10
    color: backgroundColor
    border.color: borderColor
    border.width: 1
    
    // 左边框装饰
    Rectangle {
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        width: 4
        radius: parent.radius
        color: root.accentColor
    }
    
    // 阴影效果（简化版）
    layer.enabled: true
    layer.effect: Item {
        // 简化的阴影效果
    }
    
    // 悬停效果
    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        
        onEntered: {
            scaleAnimation.to = 1.02
            scaleAnimation.start()
        }
        
        onExited: {
            scaleAnimation.to = 1.0
            scaleAnimation.start()
        }
    }
    
    NumberAnimation {
        id: scaleAnimation
        target: root
        property: "scale"
        duration: 200
        easing.type: Easing.OutQuad
    }
    
    // ========================================
    // 主布局
    // ========================================
    ColumnLayout {
        anchors.fill: parent
        anchors.margins: 20
        spacing: 12
        
        // 顶部：图标和标题
        RowLayout {
            Layout.fillWidth: true
            spacing: 10
            
            // 图标
            Text {
                text: root.icon
                font.pixelSize: 28
            }
            
            // 标题
            Text {
                text: root.title
                font.pixelSize: 13
                color: "#666"
                Layout.fillWidth: true
            }
            
            // 更新指示器
            Rectangle {
                visible: root.isUpdating
                width: 8
                height: 8
                radius: 4
                color: root.accentColor
                
                SequentialAnimation on opacity {
                    running: root.isUpdating
                    loops: Animation.Infinite
                    NumberAnimation { from: 1.0; to: 0.3; duration: 500 }
                    NumberAnimation { from: 0.3; to: 1.0; duration: 500 }
                }
            }
        }
        
        // 中间：数值显示
        Item {
            Layout.fillWidth: true
            Layout.preferredHeight: 50
            
            Row {
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.verticalCenter
                spacing: 5
                
                // 主数值
                Text {
                    id: mainValue
                    text: isFinite(Number(root.value))
                          ? Number(root.value).toFixed(root.precision)
                          : "--"
                    font.pixelSize: 36
                    font.bold: true
                    color: "#333"
                    
                    // 数值变化动画
                    Behavior on scale {
                        SequentialAnimation {
                            NumberAnimation { to: 1.1; duration: 100 }
                            NumberAnimation { to: 1.0; duration: 100 }
                        }
                    }
                    
                    onTextChanged: {
                        scale = 1.0  // 触发动画
                    }
                }
                
                // 单位（使用 y 偏移对齐）
                Text {
                    text: root.unit
                    font.pixelSize: 16
                    color: "#999"
                    y: 5  // 向下偏移使其与数值底部对齐
                }
            }
        }
        
        // 底部：状态标签
        Rectangle {
            visible: root.showStatus
            Layout.alignment: Qt.AlignHCenter
            Layout.topMargin: 5
            
            width: statusText.width + 20
            height: 24
            radius: 12
            color: getStatusBackgroundColor()
            
            Text {
                id: statusText
                anchors.centerIn: parent
                text: getStatusText()
                font.pixelSize: 12
                color: getStatusTextColor()
            }
        }
        
        Item { Layout.fillHeight: true }
    }
    
    // ========================================
    // JavaScript 辅助函数
    // ========================================
    
    // 获取状态文字
    function getStatusText() {
        switch(dataStatus) {
            case "critical":
                return "⚠️ 严重"
            case "warning":
                return "⚠️ 警告"
            case "normal":
                return "✓ 正常"
            default:
                return "未知"
        }
    }
    
    // 获取状态背景色
    function getStatusBackgroundColor() {
        switch(dataStatus) {
            case "critical":
                return "#fee2e2"  // 红色背景
            case "warning":
                return "#fef3c7"  // 黄色背景
            case "normal":
                return "#dcfce7"  // 绿色背景
            default:
                return "#f3f4f6"  // 灰色背景
        }
    }
    
    // 获取状态文字颜色
    function getStatusTextColor() {
        switch(dataStatus) {
            case "critical":
                return "#991b1b"  // 深红色
            case "warning":
                return "#92400e"  // 深黄色
            case "normal":
                return "#166534"  // 深绿色
            default:
                return "#4b5563"  // 深灰色
        }
    }
    
    // ========================================
    // 便捷方法
    // ========================================
    
    // 更新数值（带动画）
    function updateValue(newValue) {
        valueAnimation.to = newValue
        valueAnimation.start()
    }
    
    NumberAnimation {
        id: valueAnimation
        target: root
        property: "value"
        duration: 300
        easing.type: Easing.OutQuad
    }
    
    // 设置为温度卡片
    function setTemperature(temp, warning, critical) {
        dataType = "temperature"
        title = "温度"
        icon = "🌡️"
        unit = "℃"
        precision = 1
        value = temp
        warningThreshold = warning || 80.0
        criticalThreshold = critical || 100.0
    }
    
    // 设置为压力卡片
    function setPressure(press, warning, critical) {
        dataType = "pressure"
        title = "压力"
        icon = "💨"
        unit = "kPa"
        precision = 1
        value = press
        warningThreshold = warning || 500.0
        criticalThreshold = critical || 800.0
    }
    
    // 设置为流量卡片
    function setFlow(flowRate, warning) {
        dataType = "flow"
        title = "流量"
        icon = "💧"
        unit = "L/min"
        precision = 2
        value = flowRate
        warningThreshold = warning || 100.0
        criticalThreshold = 999999  // 流量一般没有严重阈值
    }
}

